{extend name="layouts:form"/}
{block name="css_common"}
{asset:css name="select2" /}
{/block}
{block name="js_common"}
{asset:js name="select2" /}
{/block}

{block name="content"}
<style>
    .images-list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .img {
        width: 80px;
        height: 80px;
        background: #f1f1f1;
        margin-right: 5px;
        position: relative;
    }

    .img i {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }

    .img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .content {
        padding-left: 30rpx;
    }

    .flex {
        display: flex;
    }

    .name {
        font-weight: bold;
        font-size: 26px;
        color: #0f0f0f;
        margin-bottom: 15px;
    }

    .status {
        padding: 2px 10px;
        background: #f5f5f5;
        color: #0f0f0f;
        font-size: 14px;
        margin-right: 10px;
    }

    .align-center {
        align-items: center;
    }

    .time {
        color: #cccccc;
        font-size: 12px;
    }

    .num {
        font-size: 24px;
        color: #0f0f0f;
        font-weight: bold;
    }

    .label-name {
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
    }

    .type {
        border: 1px solid #cccccc;
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        color: #333333;
        font-size: 14px;
        margin-bottom: 30px;
    }

    .file-content {
        border-radius: 4px;
        height: 40px;
        padding: 0 30px 0 10px;
        background: #f5f5f5;
        color: #333333;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

    }

    .file-icon {
        width: 20px;
        height: 20px;

    }

    .look {
        font-size: 14px;
        color: #1a7bb9;
    }

    .search-label {
        font-size: 14px;
        color: #333333;
        margin-right: 5px;
    }

    .input {
        border: 1px solid #cccccc;
        height: 30px;
        padding: 0 6px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .margin-bottom-xs {
        margin-bottom: 10px;
    }

    .btn-search {
        height: 30px;
        line-height: 30px;
        min-width: 80px;
        border-radius: 4px;
        color: #ffffff;
        background: #3c3c3c;
        font-size: 14px;
        margin-right: 10px;
        text-align: center;
        cursor: pointer;
    }

    .btn-reload {
        border: 1px solid #cccccc;
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 4px;
        color: #cccccc;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }

    .btn-excel {
        border: 1px solid #333333;
        height: 30px;
        line-height: 30px;
        min-width: 110px;
        border-radius: 4px;
        color: #333333;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }


</style>
<div class="content">
    <div id="app">
        <div>
            <div class="flex margin-bottom-xs" style="flex-wrap: wrap;justify-content: space-between;">
                <div class="flex" style="flex: 1;">
                    <div class="flex align-center margin-bottom-xs">
                        <span class="search-label">联系人</span>
                        <input type="text" placeholder="联系人" class="input" style="width: 130px;"
                               v-model="form.title">
                    </div>
                    <div class="flex align-center margin-bottom-xs">
                        <span class="search-label">合同编码</span>
                        <input type="text" placeholder="请输入" class="input" style="width: 130px;" v-model="form.contract_no">
                    </div>
                    <div class="flex align-center margin-bottom-xs">
                        <span class="search-label">联系电话</span>
                        <input type="text" placeholder="请输入" class="input" style="width: 130px;" v-model="form.phone">
                    </div>
                    <div class="btn-search" @click="handleSearch" style="background: #0171CF;">立即筛选</div>
                    <div class="btn-reload" @click="handleReload">
                        <img src="/static/admin/images/lujin2.png" style="width: 16px;height: 16px;">
                    </div>
                </div>
                <div class="flex">
                    <div class="btn-excel" @click="tableToExcel">导出表格</div>
                    <div class="btn-excel" style="margin-left: 15px;" @click="handleAlldown">批量下载合同</div>
                </div>
            </div>

            <table class="layui-table" id="table" lay-even="" lay-skin="nob" style="border: 1px solid #CFCFCF;border-radius: 4px;">
                <thead>
                <tr>
                    <th scope="col" width="30"></th>
                    <th scope="col" width="80">联系人</th>
                    <th scope="col" width="100">联系电话</th>
                    <th scope="col" width="100">联系地址</th>
                    <th scope="col" width="100">微信号</th>
                    <th scope="col" width="100">身份证号</th>
                    <th scope="col" width="100">合同编码</th>
                    <th scope="col" width="100">签约时间</th>
                    <th scope="col" width="80">签名</th>
                    <th scope="col" width="80">操作</th>
                </tr>
                </thead>
                <tbody id="studentTbody">
                    <tr v-for="item in list">
                        <th scope="row" >
                            <input type="checkbox" v-model="item.checkbox" name="like[write]" title="写作">
                        </th>
                        <th scope="row" >{{item.contact_name}}</th>
                        <th scope="row">{{item.contact_number}}</th>
                        <th scope="row">{{item.contact_address}}</th>
                        <th scope="row">{{item.wechat_id}}</th>
                        <th scope="row">{{item.id_card}}</th>
                        <th scope="row">{{item.contact_no}}</th>
                        <th scope="row">{{item.created_at}}</th>
                        <th scope="row">
                            <a :href="`{:env('TENCENT.COS_URL')}/`+item.signer" target="_blank">查看</a>
                        </th>
                        <th scope="row">
                            <a class="success" style="color: #00a65a" :href="`{:env('TENCENT.COS_URL')}/`+item.document_url" target="_blank">下载合同</a>
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/admin/js/xlsx.core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                form:{
                    title:'',
                    contract_no:'',
                    phone:'',
                    checkbox:[]
                },
                initialList:{:json_encode($info.partners)},
                list:{:json_encode($info.partners)}
            }
        },
        methods:{
            handleSearch(){
                let list = JSON.parse(JSON.stringify(this.initialList))
                if(this.form.title){
                    list = list.filter(e => e.contact_name.includes(this.form.title))
                }
                if (this.form.contract_no){
                    list = list.filter(e => e.contact_no.includes(this.form.contract_no))
                }
                console.log(this.form)

                if(this.form.phone){
                    list = list.filter(e => e.contact_number.includes(this.form.phone))
                }
                this.list = list
            },
            handleReload(){
                let list = JSON.parse(JSON.stringify(this.initialList))
                this.list = list
                this.form = {
                    title: '',
                    contract_no: '',
                    phone: '',
                }
            },
            handleAlldown(){
                let list = JSON.parse(JSON.stringify(this.list))
                for (let i = 0; i < list.length; i++) {
                    if(list['checkbox'] === true){
                        this.downloadFile(`{:env('TENCENT.COS_URL')}/${list[i].document_url}`,`${list[i].contact_no}.docx`)
                    }
                }
            },
             downloadFile(url, fileName) {
                 const iframe = document.createElement('iframe');
                 iframe.style.display = 'none';
                 iframe.style.height = 0;
                 iframe.src = url;
                 document.body.appendChild(iframe);
                 setTimeout(() => {
                     iframe.remove();
                 }, 1000);
            },
            tableToExcel() {
                let workbook = XLSX.utils.table_to_book(
                    document.getElementById('table'),
                    { raw: true }
                )
                XLSX.writeFile(workbook, "{$info.contract_file_name}_合伙人.xlsx", { type: 'binary' })
            },
        }
    })
</script>
<script>
</script>
{/block}
